<!--
	右边顶头Header
-->
<template>
<div class="header-wrapper">
	<div style="display: flex;align-items: center;">
		<span :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></span>
		<el-breadcrumb separator-class="el-icon-arrow-right" style="display:inline-block;">
			<!-- <el-breadcrumb-item v-for="(item,index) in routeMatched" :key="item.path">
				<span v-if="item.name===undefined||index == routeMatched.length-1">{{ item.meta.title }}</span>
				<a v-else @click="handleLink(item)">{{ item.meta.title }}</a>
			</el-breadcrumb-item> -->
			<el-breadcrumb-item v-for="(item,index) in routeMatched">
				<span>{{ item }}</span>
			</el-breadcrumb-item>
<!--			<el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
<!--			<el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
<!--			<el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
		</el-breadcrumb>
	</div>
	<div>
		<el-dropdown>
			<span style="cursor: pointer;">皮肤</span>
			<i class="el-icon-arrow-down el-icon--right"></i>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item @click="tabStyle(co)" v-for="co in style">{{co.label}}</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<el-dropdown>
			<!-- <el-button type="primary"> -->
			<span style="cursor: pointer;">管理员</span>
			<i class="el-icon-arrow-down el-icon--right"></i>
			<!-- </el-button> -->
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</div>
</template>

<script>
export default {
	name: "Header",
	/*
	*  参数
	* menus -- 菜单，用于展示左边当前处于哪的信息
	* account -- 用户信息
	* */
	props:["menus","account","routePath"],
	data(){
		return {
			isCollapse:true,
			/*
			* 皮肤列表
			* */
			style:[
				{
					label:'默认',
					value:'base'
				},
				{
					label:'红色',
					value:'red'
				},
				{
					label:'绿色',
					value:'green'
				},
				{
					label:'黑色',
					value:'black'
				}
			],
			/*
			 * 显示的菜单文字
			 *  */
			routeMatched:[],


		}
	},
	methods:{
		/**
		 * 退出登录
		 */
		logOut(){
			window.localStorage.clear();
			this.$router.push({path:'/login'});
		},
		handleLink(item){
			console.log(item);
			// this.$router.push({path:item.path});
		},
		/**
		 * 切换皮肤
		 * @param co
		 */
		tabStyle(co){
			let el = document.querySelector('html');
			el.setAttribute('class',localStorage.getItem('v3-element-plus-style') || 'base');
			localStorage.setItem('v3-element-plus-style',co.value);
			el.setAttribute('class', co.value);
		},
		/**
		 * 获取显示的菜单文字
		 */
		getCurrentMenuShowTitle(){
			// 创建之前先获取显示的菜单文字
			// 路由地址
			let routePath=this.$route.path;
			// 循环判断
			this.menus.forEach((item)=>{
				// 外层循环
				if(item.path===routePath){
					// 这里添加显示的文字
					this.routeMatched.length=0;// 填加之前先清空
					this.routeMatched.push(item.title);
				} else if(item.children&&item.children.length>0){
					// 再判断有没得子菜单 ,有子菜单继续循环
					item.children.forEach((childrenItem)=>{

						if(childrenItem.path===routePath){
							this.routeMatched.length=0;// 填加之前先清空
							// 先添加父节点的文字
							this.routeMatched.push(item.title);
							// 再添加子节点的文字
							this.routeMatched.push(childrenItem.title);
						}
					});
				}
			});
		}
	},
	beforeMount() {

		// 这里是之前获取路由的数组，不晓得咋个改先放这
		// this.routeMatched=this.$router.currentRoute.value.matched;
		// console.log(this.$router.currentRoute.value.matched);
	},
	watch:{
		// 设置显示的当前位于那个菜单的问题
		// 在声明周期内观察不管用，直接监听menus的变化，在menus变化时即是传参进来了，在这设置显示文字
		menus(){
			this.getCurrentMenuShowTitle();
		},
		routePath(){
			this.getCurrentMenuShowTitle();
		}
	},
}
</script>

<style lang="scss" scoped>
.header-wrapper{
	width: 100%;
	height:100%;
	//box-shadow: 24px 4px 29px #ccc;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.el-icon-s-fold,.el-icon-s-unfold{
	cursor: pointer;
	font-size:30px;
	padding:15px;
}
</style>